<template>
  <div class="pc-container">
    <div
      v-if="!editPasswordVisible && !changePhoneVisible && !editEmailVisible"
      class="pc-info"
    >
      <fks-row
        :gutter="16"
        type="flex"
        justify="center"
      >
        <fks-col
          :xs="20"
          :sm="18"
          :md="18"
          :lg="16"
          :xl="16"
        >
          <div class="title">
            <i class="fks-title-icon" />
            <span>{{ LANG.PERSONAL_INFORMATION }}</span>
          </div>
          <div class="row-content-container">
            <div class="row-content">
              <div>
                <div>{{ LANG.USERNAME }}</div>
                <!-- <div style=" font-size: 12px;color: #999;">
                  {{ LANG.USERNAME_TIP }}
                </div> -->
              </div>
              <div>{{ form.username }}</div>
            </div>
            <fks-divider />
            <div
              class="row-content"
              style="cursor: pointer"
              @click="changPassword"
            >
              <div>{{ LANG.PASSWORD }}</div>
              <div>
                <fks-input
                  v-model="form.password"
                  type="password"
                  readonly
                />
              </div>
            </div>
            <fks-divider />
            <div
              class="row-content"
              style="cursor: pointer"
              @click="changPhone"
            >
              <div>{{ LANG.PHONE }}</div>
              <div>{{ form.phone }}</div>
            </div>
            <fks-divider />
            <div
              class="row-content"
              style="cursor: pointer"
              @click="editEmail"
            >
              <div>{{ LANG.EMAIL }}</div>
              <div>{{ form.email }}</div>
            </div>
          </div>
        </fks-col>
      </fks-row>
      <fks-row
        v-if="extraData.length != 0"
        :gutter="16"
        type="flex"
        justify="center"
      >
        <fks-col
          :xs="20"
          :sm="18"
          :md="18"
          :lg="16"
          :xl="16"
        >
          <div class="title">
            <div class="fks-title-icon" />
            <span>{{ LANG.THIRD_PARTY_ACCOUNT }}</span>
          </div>
          <div class="row-content-container">
            <div
              v-for="item in extraData"
              :key="item.key"
              class="bindPage"
            >
              <div class="row-content">
                <div @click="login(item)">
                  <fks-icon
                    style="
                      width: 1rem;
                      height: 24px;
                      margin-right: 8px;
                      margin-bottom: 3px;
                      line-height: 24px;
                      cursor: pointer;
                    "
                    :icon-class="item.key"
                  />
                  <span>{{ item.name }}</span>
                </div>
                <div style="display: flex; align-items: center">
                  <div style="margin-right: 24px">
                    <div v-if="item.userFullname">
                      {{ item.userFullname }}
                    </div>
                    <div
                      v-if="!item.userFullname"
                      style="color: #ccc"
                    >
                      {{ LANG.NO_BIND }}
                    </div>
                  </div>
                  <div>
                    <fks-button
                      v-if="!item.state"
                      text
                      @click="login(item)"
                    >
                      {{ LANG.BIND }}
                    </fks-button>
                    <fks-button
                      v-if="item.state"
                      danger-text
                      @click="unbind(item)"
                    >
                      {{ LANG.UNBIND }}
                    </fks-button>
                  </div>
                </div>
              </div>
              <fks-divider />
            </div>
          </div>
        </fks-col>
      </fks-row>
    </div>
    <edit-password v-if="editPasswordVisible" />
    <change-phone v-if="changePhoneVisible" />
    <edit-email v-if="editEmailVisible" />
  </div>
</template>
<script>
import EditPassword from './components/EditPassword'
import ChangePhone from './components/ChangePhone.vue'
import EditEmail from './components/EditEmail.vue'
import * as types from '@/store/Getter/getterTypes.js'
import Mix from '@/mixins/module'
import {
  getExtraData,
  updataExtra,
  authenticationLogin,
  exit,
  updateEmail
} from './api'
export default {
  name: 'PrivacyCenter',
  components: {
    EditPassword,
    ChangePhone,
    EditEmail
  },
  mixins: [Mix],
  data() {
    return {
      isEditEmail: false,
      form: {
        password: '12345678888888888',
        phone: '',
        email: ''
      },
      extraInfo: [],
      editPasswordVisible: false,
      allExtraData: [],
      changePhoneVisible: false,
      editEmailVisible: false,
      extraData: []
    }
  },
  computed: {
    socials() {
      return this.$store.state.loginStrategy.loginWays || []
    },
    user() {
      return this.$store.state.user
    },
    portalId() {
      return this.$store.state.portal.id
    },
    theme() {
      return this.$store.getters[types.THEME]
    }
  },
  created() {
    this.getExtraInfo()
    this.updatePhone()
    this.updateEmail()
    this.form.username = this.user.userName
    // this.form.email = this.user.email;
    if (this.$route.query.errorMsg) {
      this.$message.error(this.$route.query.errorMsg)
      this.$router.push('/privacyCenter')
    }
  },
  methods: {
    //切换到编辑邮箱页面
    editEmail() {
      this.editEmailVisible = true
    },
    //切换到编辑手机号页面
    changPhone() {
      this.changePhoneVisible = true
    },
    //切换到编辑密码页面
    changPassword() {
      this.editPasswordVisible = true
    },
    //点击第三方登录图标，打开第三方扫码页面
    login(item) {
      let data = `/sys-auth/oauth/render_url/${item.key}`
      authenticationLogin(data)
        .then((res) => {
          window.location.href = res + '_' + this.user.id
        })
        .catch((err) => {})
    },
    //解绑第三方账号
    unbind(row) {
      this.$confirm(this.LANG.UNBIND_TIP, {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.UNBIND,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true
      })
        .then(() => {
          updataExtra({ id: row.id })
            .then((response) => {
              if (response.status) {
                exit(row.userName)
                  .then((res) => {
                    if (res.status) {
                      this.getExtraInfo()
                    }
                  })
                  .catch(() => {})
                this.$message.success(this.LANG.UNBIND_SUCCESS)
              }
            })
            .catch(() => {})
        })
        .catch(() => {})
    },
    //回显邮箱内容
    updateEmail(val) {
      if (val) {
        this.form.email = val
      } else {
        this.form.email = this.user.email
      }
    },
    //回显手机号内容
    updatePhone(val) {
      if (val) {
        this.form.phone = val
      } else {
        this.form.phone = this.user.phone
      }
    },
    //获取当前用户第三方绑定账号信息
    getExtraInfo() {
      getExtraData({ userId: this.user.id })
        .then((res) => {
          this.extraInfo = res.data
          this.extraData = []
          this.extraData = JSON.parse(JSON.stringify(this.socials))
          if (this.extraInfo.length != 0) {
            this.extraInfo.forEach((item) => {
              this.extraData.forEach((value) => {
                if (item.source == value.key) {
                  value.id = item.id
                  value.userFullname = item.userFullname
                  value.state = true
                  value.userName = item.userName
                  // this.extraData.splice(this.extraData.indexOf(value), 1);
                } else {
                  // value.userFullname = this.LANG.NO_BIND;
                  value.state = false
                }
              })
            })
          } else {
            this.extraData.forEach((value) => {
              // value.userFullname = this.LANG.NO_BIND;
              value.state = false
            })
          }
        })
        .catch(() => {})
    }
  },
  //路由守卫，修改密码
  beforeRouteLeave(to, from, next) {
    to.path != '/login' && this.$store.getters.unCheckedPWD
      ? next(false)
      : next()
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-divider--horizontal {
  margin: 0;
}

.bindPage {
  ::v-deep .fks-divider--horizontal {
    margin-left: 24px;
  }

  span {
    cursor: pointer;
  }
}

::v-deep.fks-input {
  flex: 1;

  .fks-input__inner {
    width: auto;
    padding: 0;
    border: none;
    text-align: right;
    cursor: pointer !important;
  }
}

.pc-container {
  width: 100%;
  min-width: 720px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
  background-color: white !important;

  .pc-info {
    padding-top: 56px;
  }

  .title {
    display: flex;
    font-weight: bold;
    font-size: 16px;
    color: #191919;
  }

  .row-content-container {
    padding: 0 24px;
    margin: 24px 0 36px;
    border: 1px solid #eee;
    border-radius: 8px;

    .row-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 64px;
    }
  }
}
</style>